<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>我要大礼包</title>

    <link href="../../css/bootstrap.css" rel="stylesheet" type="text/css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
    
</head>
<style type="text/css">
    .imgstyle{
        position: absolute;
        width: 6%;
        height: 7%;
        z-index: 1;
    }
    .currentTurn{
        text-align: left;
        color: white ;
        font-size: 15pt;
        z-index: 999;
        display: block;
        display: none;
        padding-top: 4%;
        padding-left: 5%;
        position: absolute;
    }
    .currentTurnSpan{
        font-family: '微软雅黑';font-size: 35pt;color: orange;
    }
    .goaroundTurn{
        text-align: left;
        color: white ;
        font-size: 40pt;
        z-index: 999;
        display: block;
        padding-left: 6%;
        padding-top: 8%;
        position: absolute;
    }
    .goaroundTurnSpan{
        font-family: '微软雅黑';font-size: 55pt;color: yellow;
    }
    .othGO{
        text-align: center;
        color: white ;
        font-size: 30pt;
        z-index: 999;
        display: block;
        padding-top: 20%;
    }
    .othGOSpan{
        font-family: '微软雅黑';font-size: 50pt;color: yellow;position: absolute;
    }
    .imgdiv{
        position:absolute;z-index:2;font-weight: 900;color: #e91e63 ;font-size: 16pt;-webkit-text-stroke-width:2px;-webkit-text-stroke-color:#ff0;
    }
    .bombimg{
        position:absolute;transform:scale(1);z-index: 999999
    }
    @keyframes buzzout {
        0%   {transform: rotate(0deg);}
        25%  {transform: rotate(4deg);}
        50%  {transform: rotate(0deg);}
        75%  {transform: rotate(-4deg);}
        100% {transform: rotate(0deg);}
    }

    @keyframes bigGO {
        0%  {transform: scale(1);}
        100%{transform: scale(2);}
    }
	@keyframes winlistopacity {
        0%  {-moz-opacity:0.1;opacity:0.1;}
        100%{-moz-opacity:1;opacity:1;}
    }

</style>
<body style="background:url(../../img/spree/spree.jpg) no-repeat;background-size: cover;height: 100%;width: 100%">

<!-- 上面区域的基准图片位置2 先 从左往右 再 从上往下 图片的位置是 1,2,3,4,5,6,7,8  桌号: 1,2,3,6,7,8,11,12-->     
    <img class="shakeimg imgstyle team1" alt="1" style="margin-left: 35%;margin-top: 0%;"><!-- 2 -->
                             <div class="imgdiv" style="margin-left: 35%;margin-top: 0%;"></div>

    <img class="shakeimg imgstyle team1" alt="1" style="margin-left: 29%;margin-top: 2%;"><!-- 1 -->
                             <div class="imgdiv" style="margin-left: 29%;margin-top: 1%;"></div>

    <img class="shakeimg imgstyle team1" alt="1" style="margin-left: 42%;margin-top: 1%;"><!-- 3 -->
                             <div class="imgdiv" style="margin-left: 42%;margin-top: 0%;"></div>

    <img class="shakeimg imgstyle team1" alt="1" style="margin-left: 34%;margin-top: 5%;"><!-- 4 -->
                             <div class="imgdiv" style="margin-left: 34%;margin-top: 4%;"></div>

    <img class="shakeimg imgstyle team1" alt="1" style="margin-left: 39%;margin-top: 6%;"><!-- 5 -->
                             <div class="imgdiv" style="margin-left: 39%;margin-top: 5%;"></div>

    <img class="shakeimg imgstyle team1" alt="1" style="margin-left: 46%;margin-top: 5%;"><!-- 6 -->
                             <div class="imgdiv" style="margin-left: 46%;margin-top: 4%;"></div>

    <img class="shakeimg imgstyle team1" alt="1" style="margin-left: 36%;margin-top: 11%;"><!-- 7 -->
                             <div class="imgdiv" style="margin-left: 36%;margin-top: 10%;"></div>

    <img class="shakeimg imgstyle team1" alt="1" style="margin-left: 43%;margin-top: 11%;"><!-- 8 -->
                             <div class="imgdiv" style="margin-left: 43%;margin-top: 10%;"></div>

<!-- 左边区域的基准图片位置1 先 从左往右 再 从上往下 图片的位置是 1,2,3,4,5,6,7,8 桌号:13,15,16,17,18,20,21,22 -->
    <img class="shakeimg imgstyle team2" alt="1" style="margin-left: 21%;margin-top: 25%;"><!-- 1 -->
                             <div class="imgdiv" style="margin-left: 21%;margin-top: 24%;"></div>

    <img class="shakeimg imgstyle team2" alt="1" style="margin-left: 28%;margin-top: 29%;"><!-- 2 -->
                             <div class="imgdiv" style="margin-left: 28%;margin-top: 28%;"></div>

    <img class="shakeimg imgstyle team2" alt="1" style="margin-left: 34%;margin-top: 32%;"><!-- 3 -->
                             <div class="imgdiv" style="margin-left: 34%;margin-top: 31%;"></div>

    <img class="shakeimg imgstyle team2" alt="1" style="margin-left: 41%;margin-top: 31%;"><!-- 4 -->
                             <div class="imgdiv" style="margin-left: 41%;margin-top: 30%;"></div>

    <img class="shakeimg imgstyle team2" alt="1" style="margin-left: 47%;margin-top: 38%;"><!-- 5 -->
                             <div class="imgdiv" style="margin-left: 47%;margin-top: 37%;"></div>

    <img class="shakeimg imgstyle team2" alt="1" style="margin-left: 32%;margin-top: 40%;"><!-- 6 -->
                             <div class="imgdiv" style="margin-left: 32%;margin-top: 39%;"></div>

    <img class="shakeimg imgstyle team2" alt="1" style="margin-left: 40%;margin-top: 40%;"><!-- 7 -->
                             <div class="imgdiv" style="margin-left: 40%;margin-top: 39%;"></div>

    <img class="shakeimg imgstyle team2" alt="1" style="margin-left: 47%;margin-top: 44%;"><!-- 7 -->
                             <div class="imgdiv" style="margin-left: 47%;margin-top: 43%;"></div>

<!-- 右边区域的基准图片位置1 先 从左往右 再 从上往下 图片的位置是 1,2,3,4,5,6,7,8 桌号:4,5,9,10,14,19,23,24 -->
    <img class="shakeimg imgstyle team3" alt="1" style="margin-left: 75%;margin-top: 17%;"><!-- 1 -->
                             <div class="imgdiv" style="margin-left: 75%;margin-top: 16%;"></div>

    <img class="shakeimg imgstyle team3" alt="1" style="margin-left: 80%;margin-top: 20%;"><!-- 2 -->
                             <div class="imgdiv" style="margin-left: 80%;margin-top: 19%;"></div>

    <img class="shakeimg imgstyle team3" alt="1" style="margin-left: 77%;margin-top: 25%;"><!-- 3 -->
                             <div class="imgdiv" style="margin-left: 77%;margin-top: 24%;"></div>

    <img class="shakeimg imgstyle team3" alt="1" style="margin-left: 85%;margin-top: 23%;"><!-- 4 -->
                             <div class="imgdiv" style="margin-left: 85%;margin-top: 22%;"></div>

    <img class="shakeimg imgstyle team3" alt="1" style="margin-left: 83%;margin-top: 28%;"><!-- 5 -->
                             <div class="imgdiv" style="margin-left: 83%;margin-top: 27%;"></div>

    <img class="shakeimg imgstyle team3" alt="1" style="margin-left: 72%;margin-top: 31%;"><!-- 6 -->
                             <div class="imgdiv" style="margin-left: 72%;margin-top: 30%;"></div>

    <img class="shakeimg imgstyle team3" alt="1" style="margin-left: 78%;margin-top: 31%;"><!-- 7 -->
                             <div class="imgdiv" style="margin-left: 78%;margin-top: 30%;"></div>

    <img class="shakeimg imgstyle team3" alt="1" style="margin-left: 83%;margin-top: 35%;"><!-- 8 -->
                             <div class="imgdiv" style="margin-left: 83%;margin-top: 34%;"></div>


    <div id="goArounddiv" class="currentTurn" style="">
        <div style="font-size: 25pt;float: left;margin-top: 5%;font-family: '微软雅黑';font-weight: 600; ">当前回合:&nbsp;</div>
        <span class="currentTurnSpan" id="goAround" ></span>
    </div>
<!-- 每个回合倒计时倒计时: -->
    <div class="goaroundTurn" style="">
        <span class="goaroundTurnSpan" style="" id="timer"></span>
    </div>
<!-- 321倒计时: -->
    <div class="othGO" style="">
        <span class="othGOSpan" style="" id="321go"></span>
    </div>
<!-- 查询中奖桌号信息 -->
    <div onclick="showlist();" style="position: absolute;margin-top: 33%;margin-left: 6%;width: 30%;height: 60px;"></div>
<!-- 获取抽奖页面奖品信息 -->
<div id="getLukyTable" class="modal fade" style="display: none; width: 100% ;height: 100%;">
    <div class="box box-default extensionDiv" style="margin-left:30%;margin-top: 100px;width: 600px;height: auto;text-align: center;background-color: #fff;"><!-- background-color: #fff; -->
        <div class="box-body" >
            <div class="modal-header" >
                <div style="font-size: 15pt;color: rgb(255, 209, 0);float: left;">&nbsp;获&nbsp;胜&nbsp;队&nbsp;伍</div>
                <a class="close" data-dismiss="modal">×</a>
            </div>
            <div class="modal-body">
              <table class="table table-bordered table-striped table-hover"  id="AnchorluckyawarlistTable">
                <tr id="luckytablelist">
                    <td style="border:0px;">桌号头像</td>
                    <td style="border:0px;">桌号</td>
                </tr>  
              </table>     
            </div>
            <div class="modal-footer" >
                <!-- <a href="#" class="btn" onclick="saveluckyawardmessage();">确定</a> -->
                <a href="#" class="btn" data-dismiss="modal">关闭</a>
            </div>
        </div>
    </div>
</div>
    <div id="mainIP" hidden="hidden"><%=httpUrl%>|<%=socketUrl%></div>
</body>
<script type="text/javascript" src="../../js/li/jquery.min.js"></script>
<script src="./../js/bootstrap.js"></script>
<script src="../../js/plugins/layer/layer.js"></script>
<script type="text/javascript">
    var connectIP = $("#mainIP").html();
    var ip =connectIP.split("|")[0];
    var socketUrl =connectIP.split("|")[1];
    // 主监听socket   用来控制 次监听socket
    var mainSocket='';
    var mainUrl= socketUrl +'mainsocket';

    var myCounter = {};// new Counter(40,1); 每轮游戏的定时器
    var time = {}; // 3 2 1 倒计时 的对象
    var currentCount = 1;//当前 的轮回数
    var removeArr = [];//每次轮回被干掉的桌号

    var Inter;// setInterval对象
    var gameOver = false;
    $(function(){
        mainWebSocket();
        init();

    })
    /*
    * 初始化数据
    */
    function init(){
        $.ajax({
            url:ip+'threekingdoms/initstage0',
            type:'get',
            async:false,
            success:function(teamArr){
                var team1 = teamArr.slice(0, 8);
                var team2 = teamArr.slice(8, 16);
                var team3 = teamArr.slice(16, 24);
                $(".team1").each(function(index){
                    var id = team1[index];
                    $(this).attr("id",id);
                    $("#"+id+"~div:first").html(id+"");
                    if(team1[index]<10){
                        $(this).attr("src","../../img/spree/0"+team1[index]+".png");
                    }else{
                        $(this).attr("src","../../img/spree/"+team1[index]+".png");
                    }
                })
                $(".team2").each(function(index){                    
                    var id = team2[index];
                    $(this).attr("id",id);
                    $("#"+id+"~div:first").html(id+"");
                    if(team2[index]<10){
                        $(this).attr("src","../../img/spree/0"+team2[index]+".png");
                    }else{
                        $(this).attr("src","../../img/spree/"+team2[index]+".png");
                    }
                })
                $(".team3").each(function(index){
                    var id = team3[index];
                    $(this).attr("id",id);
                    $("#"+id+"~div:first").html(id+"");
                    if(team3[index]<10){
                        $(this).attr("src","../../img/spree/0"+team3[index]+".png");
                    }else{
                        $(this).attr("src","../../img/spree/"+team3[index]+".png");
                    }
                })
                console.log("初始化桌号成功");
            },
            error:function(){
                console.log("初始化桌号失败");
            }
        })
    }
    // 连接mainWebSocket  服务
    function mainWebSocket(){
        if ('WebSocket' in window)
            mainSocket = new WebSocket(mainUrl);
        else if ('MozWebSocket' in window)
            mainSocket = new MozWebSocket(mainUrl);
        //打开连接时触发
        mainSocket.onopen = function() {
            console.log('OPEN: ' + mainSocket.protocol);
        };
        //收到消息时触发
        mainSocket.onmessage = function(message) {
            console.log("mainsocket收到消息了"+message);
            var string = message.data.split(":");
            var objMsg = string[0];
            var controlMsg = string[1];
            if(objMsg == "spree"){
                if(controlMsg == "start"){
                    time_go();
                }
            }
        };  
    }
    function time_go(){
        //if(document.getElementById('bombid')){
         //   document.removeChild(document.getElementById('bombid'));
        //}
        time = new Time(4,1);
        time.start();
    }
    /*
    * 给图片增加css 动画
    */
    function shakeImg(){
        $(".shakeimg[alt=1]").css({
            "animation":"buzzout 2s infinite linear"
        })
    }
    /*
    * 倒计时 3 2 1
    */
    function Time(nMax,nInterval){
        this.maxTime = nMax;
        this.interval = nInterval;
        this.objId = "321go";
        this.obj = null;
        this.num = this.maxTime;
        this.timer = null;
        this.start = function(){ 
            this.obj = document.getElementById(this.objId);
            if(this.num>0) setTimeout(this.run,this.interval*1000);
        };
        this.run = function(){
            $("#321go").css({
                "animation":"none"
            })
            if(time.num>1) {
                time.num--;
                time.obj.innerHTML = time.num+"s";
                $("#321go").css({
                    "animation":"bigGO 1s 3"
                })
                time.timer = setTimeout(time.run,time.interval*1000);
            }else if(time.num == 1){
                time.num--;
                time.obj.innerHTML = "GO!";
                $("#321go").css({
                    "animation":"bigGO 1s 1"
                })
                time.timer = setTimeout(time.run,time.interval*1000);
            }else{
                time.obj.innerHTML = "";
                shakeImg();
                Inter = window.setInterval(plusOne,1500);
                $("#goArounddiv").show();
                $("#goAround").html(currentCount);//显示当前游戏轮回数

                clearTimeout(time.timer);
                var timecount = gettimebycount(currentCount-1);//根据当前轮数 获取下一轮的游戏时间
                myCounter = new Counter(timecount,1);
                myCounter.start();
            }
        };
    }
    /*
    * 倒计时方法  nMax:总时间  nInterval:时间间隔 以秒为单位
    */
    function Counter(nMax,nInterval){
        this.maxTime = nMax;
        this.interval = nInterval;
        this.objId = "timer";
        this.obj = null;
        this.num = this.maxTime;
        this.timer = null;
        this.start = function(){ 
            this.obj = document.getElementById(this.objId);
            if(this.num>0) setTimeout(this.run,this.interval*1000);
        };
        this.run = function(){
            if(myCounter.num>0) {
                myCounter.num--;
                myCounter.obj.innerHTML = myCounter.num+"s";
                myCounter.timer = setTimeout(myCounter.run,myCounter.interval*1000);
            }
            //倒计时结束执行的方法
            else {
                clearTimeout(myCounter.timer);
                myCounter.obj.innerHTML = "";
                clearInterval(Inter);
                if(gameOver){
                    showAwardList();
                }else{
                    removeTable();
                }
                
            }
            if(myCounter.num == 2){
                $.ajax({
                    url:ip+'threekingdoms/stageresult',
                    type:'get',
                    success:function(data){
                        if(data.errorcode == 0){
                            removeArr = data.removedteams;
                            currentCount = data.nextterm;//将下一轮数记录下来
                            console.log("获取数据成功");
                        }else if(data.errorcode == 1){
                            gameOver = true;
                            removeArr = data.retults;

                        }
                    },
                    error:function(){
                        console.log("获取数据失败");
                    }
                })
            }
        };
    }
    /*
    * 处理被干掉的桌号
    */
    function removeTable(){
        
        for(var i=0; i<removeArr.length; i++){
            $("#"+removeArr[i]).css({
                "-webkit-filter": "grayscale(100%)",
                "animation":"none"
            })
            $("#"+removeArr[i]+"~div:first").css({
                "-webkit-filter": "grayscale(100%)"
            })
            $("#"+removeArr[i])[0].alt = 0;
            var left = $("#"+removeArr[i])[0].offsetLeft;
            var top = $("#"+removeArr[i])[0].offsetTop;
            showbomb(left,top,i,removeArr[i]);
        }
      
        setTimeout(function(){
            removeArr = [];
            if(currentCount == 7){
                layer.msg("最后一轮游戏准备");
            }else{
                layer.msg("第"+(currentCount)+"轮游戏准备");
            };
            time_go();
        },3000);

    }
	var au = document.createElement("audio");
    au.preload="auto";
    au.src = "../../sound/baozha.mp3";
    function playSound() {
        au.play();
    }
	function showbomb(left,top,x,id){
        
        if(x == 0){
            $(document.body).append(
            "<img src='../../img/baozha/0.gif' id='bombimg"+id+"' class='bombimg' style='left:"+left+"px;top:"+top+"px;'/>");
            for(var i=1; i<10; i++){

                // window.setTimeout(function(){
                    // $("#bombimg")[0].src = '../../img/baozha/'+i+'.gif';
                    $("#bombimg"+id)[0].src = '../../img/baozha/'+i+'.gif';
                // },300)
            }
        }else if(x == 1){
            $(document.body).append(
            "<img src='../../img/baozha/0.gif' id='bombimg"+id+"' class='bombimg' style='left:"+left+"px;top:"+top+"px;'/>");
            for(var j=1; j<10; j++){
                // window.setTimeout(function(){
                    // $("#bombimg")[0].src = '../../img/baozha/'+j+'.gif';
                    $("#bombimg"+id)[0].src = '../../img/baozha/'+j+'.gif';
                // },300)
            }
        }else if(x == 2){
            $(document.body).append(
            "<img src='../../img/baozha/0.gif' id='bombimg"+id+"' class='bombimg' style='left:"+left+"px;top:"+top+"px;'/>");
            for(var z=1; z<10; z++){
                // window.setTimeout(function(){
                    // $("#bombimg")[0].src = '../../img/baozha/'+z+'.gif'
                     $("#bombimg"+id)[0].src = '../../img/baozha/'+z+'.gif'
                // },300)
            }
        }
    }
    /*
    * 根据当前回合数求下个回合的时间
    */
    function gettimebycount(count){
        var timeArr = [40,30,25,20,15,10,10];
        // var timeArr = [4,4,4,4,4,4,4,4];
        return timeArr[count];
    }   
    /*
    * 展示抽奖页面奖品信息
    */
    function showAwardList(){
        var string = '';
        var data = [];
        $(".shakeimg").css({
            "animation":"none"
        })
        $(".shakeimg[alt=1]").each(function(){
            var id = parseInt($(this).attr("id"));
            if($.inArray(id, removeArr) < 0){
                $("#"+id).css({
                    "-webkit-filter": "grayscale(100%)",
                    "animation":"none"
                })
                $("#"+id+"~div:first").css({
                    "-webkit-filter": "grayscale(100%)"
                })
            }
        });
		$(".bombimg").each(function(){
			$(this)[0].src = '';
		});
        $.ajax({
            url:ip+'threekingdoms/saveluckytable',
            type:'post',
            data:{data:data},
            success:function(data){
                if(data.errCode == 0){
                    console.log("保存成功");
                }
            },
            error:function(){
                console.log("保存失败");
            }
        })
		au.src = "../../sound/maliwin.mp3";
        au.play();
		for(var i = 0; i<removeArr.length ;i++){
            var src = $("#"+removeArr[i])[0].src;
            data.push({ num: i+1, table: removeArr[i], img: src})
            string += ''+
            '<tr>'+
                '<td><img style="width: 60px;height: 60px;" src="'+src+'"></td>'+
                '<td style="vertical-align: middle">'+removeArr[i]+'</td>'+
            '</tr>';
        }
        $("#luckytablelist").after(string);
        $("#getLukyTable").modal("show");
		$("#getLukyTable").css({
            "animation" : "winlistopacity 5s 1 linear"
        });
    }
    
    function plusOne(){
        var i = Math.floor(Math.random()*3)+1;
        var teamlength = $(".team"+i+"[alt=1]").length;
        var ranNum = Math.floor(Math.random()*teamlength);
        var ranElement =$(".team"+i+"[alt=1]")[ranNum];
        var y = Math.ceil(Math.random()*2);
        layer.tips('+'+y+"0", ranElement, {
            tips: 1,
            guide: 0,
            // style: ['background-color:#000; color:#f00; border:1px solid #19e64dff;', '#19e64dff']
        }) 
    }
    function showlist(){
        if(gameOver){
            $("#getLukyTable").modal("show");
        }
    }
</script>
</html>